<template>
  <div>
      编辑用户
      <p>
        姓名: <input type="text" v-model="user.name" placeholder="姓名">
      </p>
      <p>
        性别: 
        <input type="radio" v-model="user.gender" value="男">靓仔
        <input type="radio" v-model="user.gender" value="女">靓妹儿
      </p>
      <p>
        出生日期: <input type="date" v-model="user.birthdate" >
      </p>
      <p>
        <button @click="handleUpdate">确定修改</button>
      </p>

      <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserEdit',
  data(){
    return {
      user: '',
      message: ''
    }
  },
  beforeMount(){
    let { id } = this.$route.query ;
    let promise = this.axios.get(`/apis/user/${id}`);
    promise.then( res => {
      console.log( res );
      if( res.data.status === 'success' ) {
        this.user = res.data.user ;
      }
    });
  },
  methods: {
    handleUpdate(){
      let promise = this.axios.put('/apis//user/update' , this.user );
      promise.then( res => {
        console.log( res );
        if( res.data.status === 'success' ) {
          alert( res.data.message );
          // 用编程式导航去往用户列表
          this.$router.push( { name: 'list' } );
          return;
        }
        this.message = res.data.message ;
      }).catch( reason => {
        this.message = reason ;
      });
    }
  }
}
</script>

<style>

</style>